@charset "UTF-8";
html{font-size: 100%;}

/*全体
------------------------------------------------------------------------------------------------*/
html{height: 100%;font-family: Arial, sans-serif;} /* 余白なし設定,統一フォント */

body{transition: background-image 2s ease-in-out;
    -webkit-font-smoothing: antialiased; /* Safari and Chrome */
    -moz-osx-font-smoothing: grayscale; /* Firefox on macOS */
} /* フェードアニメーション */

body {
    background-size: cover;
    background-position: center;
}

/*ヘッダー
------------------------------------------------------------------------------------------------*/
header{
    display: flex;                  /* ヘッダー：横並び指定 */
    justify-content: space-between; /* ヘッダー：両端合わせ指定 */
    margin: 1.5rem 1.5rem 0rem;     /* ヘッダー：上 左右 下の余白指定 */
}


.logo{height: 40vh;
    position: absolute; /* ロゴの位置を固定する */
    top: 50vh; /* 画面の上から40%の位置に */
    right: 5vw; /* 画面の右端から10vwの位置に */
}               

.main-nav img{
    height: 1.5%;
    position: absolute; /* ロゴの位置を固定する */
    top: 86vh; /* 画面の上から40%の位置に */
    right: 5vw; /* 画面の右端から10vwの位置に */
}

.main-nav img:hover {
    filter: brightness(0) saturate(100%) invert(26%) sepia(90%) saturate(7496%) hue-rotate(-15deg) brightness(100%) contrast(105%);
}


/*body
------------------------------------------------------------------------------------------------*/
body{
    background-size: cover;        /* 背景画面：縦横比を保持したまま全画面表示 */
    background-position: center;   /* 背景画面：常に画面中心合わせで伸縮 */
}


/*-----------------------------   フッターSNSアイコンの編集-----------------------*/

    .social-icons  {
    display: inline-block;
    position: absolute;
    top: 90%;
    display: flex;
    }
    
    .social-icons img {
    width: 30px; /* 画像の幅を指定 */
    height: 30px; /* 画像の高さを指定 */
    object-fit: contain; /* 画像を中央に収めて比率を維持 */
    }




/*-----------------------------   JavaScript   -----------------------*/
/* 全画面背景 */
.background-slideshow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1; /* 背景を全要素の後ろに配置 */
}

.background-slideshow .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover; /* 背景画像を全画面にフィットさせる */
    background-position: center; /* 背景画像の中心を表示 */
    opacity: 0; /* 初期状態で全スライドを透明にする */
    transition: opacity 3s ease-in-out; /* フェード効果のトランジションを設定 */
}

.background-slideshow .slide:first-child {
    opacity: 1; /* 初期状態で最初のスライドを表示する */
}
/*-----------------------------   JavaScript   -----------------------*/


/*-------------------------スマホサイズ----------------------------*/

@media(max-width:800px){/*以下横幅800ピクセル以下の時の表示設定*/

    .logo{height: 20vh;
        position: absolute; /* ロゴの位置を固定する */
        top: 65vh;
        right: 5vw; /* 画面の右端から10vwの位置に */
    }               
    
    .main-nav img{
        height: 1.0%;
        position: absolute; /* ロゴの位置を固定する */
        top: 83vh; /* 画面の上から40%の位置に */
        right: 5vw; /* 画面の右端から10vwの位置に */
    }
    
    .main-nav img:hover {
        filter: brightness(0) saturate(100%) invert(26%) sepia(90%) saturate(7496%) hue-rotate(-15deg) brightness(100%) contrast(105%);
    }
    

}